<script setup>

    import {ref,reactive} from 'vue'
    import productApi from '@/api/product/product'
    import categoryApi from '@/api/product/category'
    import {useRoute} from 'vue-router'
    import ProductGrid from '@/components/ProductGrid.vue'

    const route = useRoute()

    const data = reactive({
        tabs: [
            {title: '默认排序', sort: 0},
            {title: '最新上市', sort: 1},
            {title: '销量最多', sort: 2},
        ],
        activeTabSort: 0,
        current: 1,
        products: [],
        category: {},
        loading: false,
        finished: false

    })

    const categoryId = route.params.categoryId
    const getProducts = () => {
        productApi.getProductPage({
            categoryId:categoryId,
            current:data.current,
            sort: data.activeTabSort
        }).then(response => {
            data.products.push(...response.data.records)

            data.loading = false

            if(response.data.total === data.products.length){
                data.finished = true
            }

            data.current++
        })
    }

    const getCategory = () => {
        categoryApi.getCategoryDetailsById(categoryId).then(response => {
            data.category = response.data
        })
    }

    getCategory()

    const changeTab = (sort) => {
        data.activeTabSort = sort
        data.current = 1
        data.products = []
        data.finished = false
    }
</script>

<template>
	<van-nav-bar :title="data.category.name" left-text="返回" left-arrow @click-left="$router.back()"/>

	<van-tabs :active="data.activeTabSort" :before-change="changeTab">
		<van-tab :title="tab.title" :name="tab.sort" v-for="tab in data.tabs">
            <van-list
                    v-model:loading="data.loading"
                    :finished="data.finished"
                    finished-text="没有更多了"
                    @load="getProducts"
            >
                <!--商品列表-->
                <ProductGrid :products="data.products"></ProductGrid>
            </van-list>
		</van-tab>


	</van-tabs>
</template>
<style scoped>
	.product_wrap {
		margin-top: 8px;
	}

	.product_title {
		font-size: 14px;
		line-height: 30px;
		font-weight: 500;
		width: 100%;
	}

	.product_price {
		font-size: 20px;
		color: rgb(217, 61, 61);
		width: 100%;
		padding: 10px 0;
	}
</style>
